"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Tree = function () {
    /*
        options {
            url, 
            key,
            body,
            childBody,
            parentKey
        } 
    */
    function Tree(element, columns, options) {
        var _this = this;

        _classCallCheck(this, Tree);

        this.element = element;
        this.columns = columns;
        this.options = options;
        this.fetch("root").then(function (res) {
            var html = _this.render(res, "root");
            element.html(html);
        });
    }

    _createClass(Tree, [{
        key: "fetch",
        value: function fetch(type, id) {
            var _this2 = this;

            return new Promise(function (resolve, reject) {
                var data = _this2.options.body;
                if (type === "children") {
                    data = _this2.options.childBody;
                    console.log(data);
                    data[_this2.options.parentKey] = id;
                }
                $.ajax({
                    url: _this2.options.url,
                    headers: {
                    	"content-type": "application/json;charset=utf8"
                    },
                    method: "POST",
                    data: JSON.stringify(data),
                    contentType: "json"
                }).success(resolve).fail(reject);
            });
        }
    }, {
        key: "toggle",
        value: function toggle(id, parent, depth, show) {
            var _this3 = this;

            var children = $(".parent" + id);
            if (!children.length) {
                var html = "\n                <tr id=\"children" + id + "\" class=\"children-view\">\n                    <td colspan=\"" + this.columns.length + "\" style=\"padding: 0\">\n                        <p class=\"text-center\">\u52A0\u8F7D\u4E2D...</p>\n                    </td>\n                </tr>\n            ";
                $("#node" + id).after(html);
                this.fetch("children", id).then(function (res) {
                    var childrenDepth = depth / 1 + 1;
                    var parents = parent ? parent + "-" + id : id;
                    var html = _this3.render(res, "children", parents, id, childrenDepth);
                    $("#children" + id).remove();
                    $("#node" + id).after(html);
                });
            } else {
                if (show) {
                    children.hide();
                    $(".parent" + id).find(".toggle").removeClass("active").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
                } else {
             
                    children.each(function () {
                        var classes = $(this).attr("class").split(" ");
                        if (classes[classes.length - 1] === "parent" + id) $(this).show();
                    });
                }
            }
        }
    }, {
        key: "render",
        value: function render(data, type) {
            var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";

            var _this4 = this;

            var id = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
            var depth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;

            if (typeof data === "string") data = JSON.parse(data);
            var parents = parent ? parent.split("-") : [id];
            var klass = parents.map(function (i) {
                return "parent" + i;
            }).join(" ");
            var tbody = data.map(function (row) {
                var idKey = _this4.options.key;
                var rowNode = "<tr class=\"" + klass + "\" id=\"node" + row[idKey] + "\">";
                _this4.columns.map(function (col, index) {
                	//row.hasChildren = true;
                    var icon = row.hasChildren ? '<i class="glyphicon glyphicon-folder-close toggle" data-parent="' + parent + '" data-depth="' + depth + '" data-index="' + index + '" data-id="' + row[idKey] + '"  style="cursor: pointer"></i>' : '<i class="glyphicon glyphicon-file"></i>';
                    if (index !== 0) icon = "";
                    var depthStyle = index === 0 ? "padding-left: " + depth * 20 + "px; width: " + 100 / _this4.columns.length + "%" : "";
                    rowNode += "<td style=\"" + depthStyle + "\">" + (icon +"&nbsp"+ row[col.field]) + "</td>";
                });
                rowNode += "</tr>";
                return rowNode;
            }).join("");
            if (type === "children") {
                return tbody;
            } else if (type === "root") {
                var table = '<table class="table table-hover table-striped">';
                if (type === "root") {
                    table += this.columns.map(function (col) {
                        return '<th>' + col.title + '</th>';
                    }).join("");
                }
                table += tbody;
                return table;
            }
        }
    }, {
        key: "init",
        value: function init() {
            var _this5 = this;

            this.element.on("click", "tr", function (event) {
            	var triggle = $(this).find('.toggle');
            	if(!triggle.length) return undefined;
            	triggle.toggleClass("active");
                var _event$target$dataset = triggle.data(),
                    id = _event$target$dataset.id,
                    depth = _event$target$dataset.depth,
                    parent = _event$target$dataset.parent;
                if(triggle.hasClass("glyphicon-folder-close")) {
                	triggle.removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
                } else {
                	triggle.removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
                }
                _this5.toggle(id, parent, depth, !triggle.hasClass("active"));
            });
        }
    }, {
        key: "reload",
        value: function reload(options) {
            var _this6 = this;

            this.options = options;
            this.fetch("root").then(function (res) {
                var html = _this6.render(res, "root");
                _this6.element.html(html);
            });
        }
    }]);

    return Tree;
}();
